<template>
	<view class="pay_type">
		<view class="goods_num">
			<text>就餐人数</text>
			<!-- <uni-number-box>
			</uni-number-box> -->
			<view class="uni-numbox">  
				<view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'" @click="_calcValue('subtract')">-</view>  
				<input class="uni-numbox-value" type="number" :value="inputValue" @blur="_onBlur">  
				<view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'" @click="_calcValue('add')">+</view>
			</view>  
		</view>
		<view class="content">
			<view class="line" v-for="(item,index) in list" :key="index" @click="selNumFun(item)">
				<text class="yes_use">{{item}}</text>
			</view>
		</view>
		<!-- <view class="line2" v-if="info.max_num > 0">
			<text>可坐人数：{{info.max_num}}</text>
		</view>
		<view class="line2" v-if="info.tableware_fee > 0">
			<text>茶位费（人）：{{info.tableware_fee}}</text>
		</view>
		<view class="line2" v-if="info.min_money > 0">
			<text>最低消费：{{info.min_money}}</text>
		</view> -->
		<view class="pay_bot" @click="subLobby()">确认{{info.tableware_fee > 0 ? "餐位费：￥"+info.tableware_fee+"/位" : ""}}</view>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				id : 0,
				merchantId: 0,
				info: {
					title: '',
					max_num: 9,
					min_price: 0,
					tableware_fee : 0,
				},
				list : [1,2,3,4,5,6,7,8,9],
				inputValue: 1,
				disableSubtract : true,
				disableAdd : true,
			}
		},
		methods: {
			_calcValue(type) {
				let value = this.inputValue;  
				let step = 1;  
			
				if (type === 'subtract') {  
					value -= step  
				} else if (type === 'add') {  
					value = parseInt(Number(value) + Number(step))
				}  
				if (value < 1 || value > this.info.max_num ) {  
					return  
				}  
				if(value == 1) {
					this.disableSubtract = false;
				}
				if(value == this.info.max_num) {
					this.disableAdd = false;
				}
				this.inputValue = value;  
			}, 
			_onBlur(event) {  
				let value = event.detail.value;  
				if (!value) {  
					this.inputValue = 1;  
					return  
				}  
				console.info(value);
				if (value > this.info.max_num) {  
					value = this.info.max_num;  
				} else if (value < 1) {  
					value = 1  
				}  
				
				if(value == 1) {
					this.disableSubtract = false;
				}
				if(value == this.info.max_num) {
					this.disableAdd = false;
				}
				this.inputValue = value  
			},
			selNumFun(val) {
				// if (val > this.info.max_num) { 
				// 	return ;
				// }
				this.inputValue = val;
				this.subLobby();
			},
			getInfo(){
				var self = this;
				serve.request({
                    url: '/lobby/desk/view',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: self.id,
                        merchantId: self.merchantId,
                    }
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                        });
                        common.jump('return_one');
                        return ;
                    }
                    wx.setNavigationBarTitle({
                        title: res.data.title,
                    });
                    self.info = res.data;
                    self.merchantId = res.data.merchantId;
                });
			},
			subLobby(){
				uni.redirectTo({
				    url: '/lobbyEat/lobbyGoods?merchantId='+this.merchantId+'&deskId='+this.id+'&peopleNum='+this.inputValue
				});
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			if(options.q) {
				console.info(options.q);
				var link = decodeURIComponent(options.q);
				var paramArr = link.split('=');
				console.info(paramArr);
				this.id = paramArr[1];
			} 
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.pay_type{
		.goods_num{
			padding: 20upx 30upx 63upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size:32upx;
			.uni-numbox {  
				display: flex;  
				flex-direction: row;  
				justify-content: flex-start;  
				height: 64upx;  
				border:1upx solid rgba(60,72,104,0.1);
				border-radius:32upx;
				overflow: hidden;
			}  
					
			.uni-numbox-minus,  
			.uni-numbox-plus {  
				margin: 0;  
				background-color: #f9f9f9;  
				width: 100upx;  
				height: 100%;  
				line-height: 64upx;  
				text-align: center;  
				color: #555555;  
			}  
					
					
			.uni-numbox-value {  
				background-color: #ffffff;  
				width: 100upx;  
				height: 100%; 
				 border-right: 1upx rgba(60,72,104,0.06) solid;
				 border-left: 1upx rgba(60,72,104,0.06) solid;
				text-align: center;  
			}  
					
			.uni-numbox-disabled {  
				color: #c0c0c0;  
			}  
		}
		.content{
			box-sizing: border-box;
			padding: 30upx 30upx;
			display: flex;
			flex-wrap: wrap;
			.line{
				padding-top: 10upx;
				display: flex;
				flex-direction: column;
				font-size:24upx;
				width: 26%;
				margin: 10rpx 20rpx;
				
				text{
					width: 100%;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border: 1rpx solid #ccc;
					border-radius: 50rpx;
				}
				.no_use{
					background-color: #ccc;
				}
				.yes_use{
					font-weight:bold;
				}
			}
		}
		
		.line2{
			width: 100%;
			box-sizing: border-box;
			padding: 30upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			image{
				width: 40upx;
				height: 40upx;
			}
		}
		
		.pay_bot {
		  width: 100%;
		  position: fixed;
		  left: 0;
		  bottom: 0;
		  height: 100upx;
		  background: #FBCA3F;
		  color: #fff;
		  font-size: 32upx;
		  line-height: 100upx;
		  text-align: center;
		  border-radius: 0;
		  &::after{
			  border: none;
		  }
		}
	}
</style>
